import type {ColumnDef} from '@tanstack/vue-table'
import {User} from "@/pages/user/data/schema";
import {h} from "vue";
import {Checkbox} from "@/components/ui/checkbox";
import DataTableColumnHeader from "@/pages/components/DataTableColumnHeader.vue";
import DataTableRowActions from "@/pages/components/DataTableRowActions.vue";
import {userStatuses} from "@/pages/user/data/data";

export const columns: ColumnDef<User>[] = [
    {
        id: 'select',
        header: ({table}) => h(Checkbox, {
            'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
            'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
            'ariaLabel': 'Select all',
            'class': 'translate-y-0.5',
        }),
        cell: ({row}) => h(Checkbox, {
            'modelValue': row.getIsSelected(),
            'onUpdate:modelValue': value => row.toggleSelected(!!value),
            'ariaLabel': 'Select row',
            'class': 'translate-y-0.5'
        }),
        enableSorting: false,
        enableHiding: false,
    },
    {
        accessorKey: 'id',
        header: ({column}) => h(DataTableColumnHeader, {column, title: 'User'}),
        cell: ({row}) => h('div', {class: 'w-20'}, row.getValue('id')),
        enableSorting: false,
        enableHiding: false,
    },
    {
        accessorKey: 'username',
        header: ({column}) => h(DataTableColumnHeader, {column, title: 'Username'}),
        cell: ({row}) => row.getValue('username'),
    },
    {
        accessorKey: 'nickname',
        header: ({column}) => h(DataTableColumnHeader, {column, title: 'Nickname'}),
        cell: ({row}) => row.getValue('nickname'),
    },
    {
        accessorKey: 'email',
        header: ({column}) => h(DataTableColumnHeader, {column, title: 'Email'}),
        cell: ({row}) => row.getValue('email'),
    },
    {
        accessorKey: 'address',
        header: ({column}) => h(DataTableColumnHeader, {column, title: 'Address'}),
        cell: ({row}) =>  row.getValue('address'),
    },
    {
        accessorKey: 'status',
        header: ({column}) => h(DataTableColumnHeader, {column, title: 'Status'}),
        cell: ({row}) => {
            const status = userStatuses.find(
                status => status.value === row.getValue('status'),
            )

            if (!status)
                return null

            return h('div', {class: 'flex w-[100px] items-center'}, [
                status.icon && h(status.icon, {class: 'mr-2 h-4 w-4 text-muted-foreground'}),
                h('span', status.label),
            ])
        },
        filterFn: (row, id, value) => {
            return value.includes(row.getValue(id))
        },
    },
    {
        id: 'actions',
        header: ({column}) => h(DataTableColumnHeader, {column, title: 'Actions'}),
        cell: ({row}) => h(DataTableRowActions, {row})
    }
];

export const filters = [
    {
        columnId: 'status',
        title: 'Status',
        options: userStatuses,
    }
];
